<template>
	<view class="content">
		<view v-if="isStart">
			<image class="logo" src="/static/logo.png"></image>
			<view class="text-area">
				<text class="title">欢迎</text>
			</view>
		</view>

		<view v-if="!isStart" style="width: 100%;">
			<hall ref="page_index" v-if="tb_current == 0"></hall>
			<moment v-if="tb_current == 1"></moment>
			<add v-if="tb_current == 2"></add>
			<msg v-if="tb_current == 3"></msg>
			<my ref="page_my" v-if="tb_current == 4"></my>
		</view>
		<u-tabbar @change="switchTab" v-model="tb_current" :show="tb_show" :bg-color="tb_bgColor"
			:border-top="tb_borderTop" :list="tb_list" :mid-button="tb_midButton" :inactive-color="tb_inactiveColor"
			:activeColor="tb_activeColor"></u-tabbar>
	</view>
</template>

<script>
	import add from '@/components/index_add/index_add.vue'
	import hall from "@/components/index_hall/index_hall.vue"
	import msg from "@/components/index_message/index_message.vue"
	import moment from "@/components/index_moment/index_moment.vue"
	import my from "@/components/index_user/index_user.vue"
	export default {
		components: {
			hall,
			msg,
			add,
			moment,
			my
		},
		data() {
			return {
				isLogin: false,
				isStart: true,
				tb_current: 0, // 底部导航栏双向绑定，当前选中页面
				tb_show: true, // 是否显示底部导航栏
				tb_bgColor: '#ffffff', // 底部导航栏的背景颜色
				tb_borderTop: true, // 是否显示顶部的线条
				tb_list: [{ // 显示的项目数
						iconPath: "home", // 默认图标
						selectedIconPath: "home-fill", // 选中图标
						text: '大厅', // 图标底部文本
						customIcon: false, // 非自定义
					},
					{
						iconPath: "star",
						selectedIconPath: "star-fill",
						text: '动态',
						customIcon: false,
					},
					{
						iconPath: "/static/icon/ui/index/min_button.png",
						selectedIconPath: "/static/icon/ui/index/min_button_select.png",
						text: '约玩',
						midButton: true,
						customIcon: false,
					},
					{
						iconPath: "chat",
						selectedIconPath: "chat-fill",
						text: '消息',
						customIcon: false,
					},
					{
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						customIcon: false,
					}
				],
				config: {
					hall: true,
					moment: true,
					publish: true,
					message: true,
					my: true
				},
				tb_midButton: true, // 中间的是否凸起
				tb_inactiveColor: '#909399', // 默认颜色
				tb_activeColor: '#5098FF' // 选中颜色
			}
		},
		onLoad(op) {
			if (op.message != undefined) {
				uni.showToast({
					title: op.message
				});
			}
			this.isLogin = this.checkLogin('index', '', false);
			setTimeout(() => {
				this.isStart = false;
			}, 1000);

			setTimeout(() => {
				this.$refs.page_index.loadData();
			}, 2000)

			uni.request({
				url: this.httpRoot + 'index_page',
				method: 'GET',
				data: {},
				success: res => {
					console.debug(res);
					console.debug(res.data);
					var code = 0;
					var data = {};
					var message = '';
					if ('code' in res.data) {
						code = res.data.code;
					}
					if ('message' in res.data) {
						message = res.data.message;
					}
					if ('data' in res.data) {
						data = res.data.data;
						// data = res.data.data.parseJSON(); //由JSON字符串转换为JSON对象
						// data = JSON.parse(res.data.data);
						console.debug('数据：');
						console.debug(data);
						if ('config' in data) {
							this.config = data.config;
							console.debug(data.config)
							this.init_bar();
						}
					}
				},
				fail: () => {},
				complete: () => {}
			});
		},
		methods: {
			init_bar() {
				var res = []
				var item;
				if (this.config.hall) {
					item = { // 显示的项目数
						iconPath: "home", // 默认图标
						selectedIconPath: "home-fill", // 选中图标
						text: '大厅', // 图标底部文本
						customIcon: false, // 非自定义
					};
					res.push(item);
				}
				if (this.config.moment) {
					item = {
						iconPath: "star",
						selectedIconPath: "star-fill",
						text: '动态',
						customIcon: false,
					};
					res.push(item);
				}
				if (this.config.publish) {
					item = {
						iconPath: "/static/icon/ui/index/min_button.png",
						selectedIconPath: "/static/icon/ui/index/min_button_select.png",
						text: '约玩',
						midButton: true,
						customIcon: false,
					};
					res.push(item);
				}
				if (this.config.message) {
					item = {
						iconPath: "chat",
						selectedIconPath: "chat-fill",
						text: '消息',
						customIcon: false,
					};
					res.push(item);
				}
				if (this.config.my) {
					item = {
						iconPath: "account",
						selectedIconPath: "account-fill",
						text: '我的',
						customIcon: false,
					};
					res.push(item);
				}
				this.tb_list = res;
			},
			// 下面的导航栏点击事件
			switchTab(e) {
				console.debug(this.tb_current);
				if (this.tb_current > 1 && this.tb_current < 4) {
					if (this.isLogin) {
						console.debug('已经登录');
					} else {
						console.debug('没有登录');
						this.isLogin = this.checkLogin('index', this.tb_current);
					}
				}
				setTimeout(() => {
					switch (this.tb_current) {
						case 0:
							this.$refs.page_index.loadData();
							break;
						case 1:
							break;
						case 2:
							break;
						case 3:
							break;
						case 4:
							this.$refs.page_my.loadData();
							break;
					}
				}, 1000);

			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.u-demo-area {
		margin: 0 -40rpx;
	}
</style>
